<template>
    <div>
      <!-- 查询条件 -->
      <div class="search-bar">
        <el-input v-model="data.name" placeholder="请输入获奖名称查询" :prefix-icon="searchIcon" class="search-input" />
        <el-input v-model="data.rewardCategory" placeholder="请输入获奖类别查询" :prefix-icon="searchIcon" class="search-input" />
        <el-date-picker
            v-model="data.createTime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" round @click="load">
          <i class="el-icon-search"></i> 查询
        </el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
<!--        <el-button v-if="user.role === 'TEACHER'" type="primary" round @click="handeladd">-->
<!--          <i class="el-icon-plus"></i> 新增-->
<!--        </el-button>-->
      </div>

      <!-- 数据表格 -->
      <div class="data-table">
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="70" />
          <el-table-column prop="name" label="获奖名称" />
          <el-table-column prop="level" label="级别" />
          <el-table-column prop="dept" label="授予部门" />
          <el-table-column prop="rewardLevel" label="获奖等级" />
          <el-table-column prop="rewardCategory" label="获奖类别" />
          <el-table-column prop="rewardList" label="获奖人名单" />
          <el-table-column prop="rewardDate" label="授予日期" />
          <el-table-column prop="materials" label="申报材料" />
          <el-table-column prop="cartUrl" label="证书链接" />
          <el-table-column prop="state" label="审核状态" />
          <el-table-column prop="reason" label="失败原因" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" width="250">
            <template #default="{ row }">
<!--              <el-button  type="primary" @click="update(row)">-->
<!--                <i class="el-icon-edit"></i> 修改-->
<!--              </el-button>-->
<!--              <el-button type="danger" @click="del(row)">-->
<!--                <i class="el-icon-delete"></i> 删除-->
<!--              </el-button>-->
              <el-button v-if="row.state === '未审核'"  type="primary" @click="apply(row)">
                <i class="el-icon-edit"></i> 审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          @current-change="handelCurrentChange"
          background
          layout="prev, pager, next"
          :total="data.total"
        />
      </div>

      <!-- 编辑对话框 -->
      <el-dialog width="35%" v-model="data.formVisible" title="成果表单" destroy-on-close>
        <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right">
            <el-form-item prop="name" label="审核状态">
            <el-input v-model="data.form.state" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="name" label="获奖名称">
            <el-input v-model="data.form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="level" label="级别">
            <el-input v-model="data.form.level" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="dept" label="授予部门">
            <el-input v-model="data.form.dept" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="rewardLevel" label="获奖等级">
            <el-input v-model="data.form.rewardLevel" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="rewardCategory" label="获奖类别">
            <el-input v-model="data.form.rewardCategory" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="rewardList" label="获奖人名单">
            <el-input v-model="data.form.rewardList" autocomplete="off" />
          </el-form-item>

          <el-form-item prop="materials" label="申报材料">
            <el-input v-model="data.form.materials" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="cartUrl" label="证书链接">
            <el-input v-model="data.form.cartUrl" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.formVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 审核对话框 -->
      <el-dialog width="35%" v-model="data.formVisible2" title="成果表单" destroy-on-close>
        <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right">
          <el-form-item prop="name" label="审核状态">
            <el-radio v-model="data.form.state" label="1">审核通过</el-radio>
            <el-radio v-model="data.form.state" label="2">审核未通过</el-radio>
<!--            <el-input v-model="data.form.state" autocomplete="off" />-->
          </el-form-item>
          <el-form-item prop="reason" label="驳回原因" v-if="data.form.state === '2'">
            <el-input v-model="data.form.reason" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.formVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </template>

  <script setup>
  import { reactive, ref } from "vue";
  import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
  import request from "@/utils/request";
  import { ElMessage, ElMessageBox } from "element-plus";

  const user = JSON.parse(localStorage.getItem("student-user") || "{}");

  const data = reactive({
    name: "",
    no: "",
    teacher: "",
    total: 0,
    tableData: [],
    pageNum: 1,
    pageSize: 5,
    student: JSON.parse(localStorage.getItem("student-user") || "{}"),
    formVisible: false,
    formVisible2: false,
    form: {},
  });

  const searchIcon = Search;

  // 加载数据
  const load = () => {
    if(data.createTime != null){
      const time = new Date(data.createTime);
      const Y = time.getFullYear();
      const M = (time.getMonth() + 1).toString().padStart(2, '0');
      const D = time.getDate().toString().padStart(2, '0');
      data.createTime = `${Y}-${M}-${D}`;
    }
    request
      .get("/scientific/selectPage2", {
        params: {
          pageNum: data.pageNum,
          pageSize: data.pageSize,
          name: data.name,
          rewardCategory: data.rewardCategory,
          createTime: data.createTime,
        },
      })
      .then((res) => {
        data.tableData = res.data?.list || [];
        data.tableData.forEach((item) => {
          item.state = item.state === 0 ? "未审核" : item.state === 1 ? "审核通过" : "审核未通过";
        });
        data.total = res.data.total || 0;
      });
  };

  // 初始化加载数据
  load();

  // 翻页处理
  const handelCurrentChange = () => {
    load();
  };


  // 新增数据
  const handeladd = () => {
    data.form = {};
    data.formVisible = true;
  };

  // 修改数据
  const update = (row) => {
    request.get("/scientific/detail/" + row.id).then((res) => {
      if (res.code === "200") {
        data.form = { ...res.data };
        data.formVisible = true;
      } else {
        ElMessage.error(res.msg);
      }
    });
  };

  // 修改数据
  const apply = (row) => {
    request.get("/scientific/detail/" + row.id).then((res) => {
      if (res.code === "200") {
        data.form = { ...res.data };
        data.formVisible2 = true;
      } else {
        ElMessage.error(res.msg);
      }
    });
  };


  // 删除数据
  const del = (row) => {
    ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      request.delete("/scientific/delete/" + row.id).then((res) => {
        if (res.code === "200") {
          ElMessage.success("操作成功");
          load();
        } else {
          ElMessage.error(res.msg);
        }
      });
    });
  };

  const formRef = ref();

  // 保存数据
  const save = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        request
          .request({
            url: data.form.id ? "/scientific/update" : "/scientific/add",
            method: data.form.id ? "PUT" : "POST",
            data: data.form,
          })
          .then((res) => {
            if (res.code === "200") {
              load();
              data.formVisible = false;
              data.formVisible2 = false;
              ElMessage.success("操作成功");
            } else {
              ElMessage.error(res.msg);
            }
          });
      }
    });
  };
  </script>

  <style scoped>
  .search-bar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
  }

  .search-input {
    width: 280px;
    margin-right: 10px;
  }

  .action-buttons {
    margin-bottom: 18px;
  }

  .data-table {
    margin-bottom: 18px;
  }

  .pagination {
    margin-bottom: 18px;
  }
  .el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #333;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .el-pager li.is-active {
    background-color: #333;
    color: var(--el-color-white);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: #214360;
    --el-button-outline-color: #e7f6f3;
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: #e7f6f3;
    --el-button-hover-bg-color: #f9b44c;
    --el-button-hover-border-color: #88d4c1;
    --el-button-active-bg-color: #e7f6f3;
    --el-button-active-border-color: #f9b44c;
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: #f9b44c;
    --el-button-disabled-border-color: #f9b44c;
}
::-webkit-validation-bubble-arrow-clipper[data-v-cf8a8c64] .el-pagination.is-background .el-pager li.is-active {
    background-color: #24527a;
    color: var(--el-color-white);
}
  </style>


